<template>
    <formlist
        ref="formlist"
        :formList="formList"
        :formData="formData"
        :disabled="v_disabled"
        :status="v_status"
        class="form-module mgt-12"
        @nation="nationChange"
        @province="provinceChange"
        @city="cityChange"
        @county="countyChange"
        @visible-nation="visibleNation"
        @visible-province="visibleProvince"
        @visible-city="visibleCity"
        @visible-county="visibleCounty"
    />
</template>

<script lang="ts">
// import Vue from 'vue'
import Component, { mixins } from 'vue-class-component';
import { transformFields } from '@/utils';

import { Prop, Watch } from 'vue-property-decorator';
import vuexMixins from '@/mixins/vuex-modulel-mixins';
import { FormListConfig } from '@/typings';
import { Tools } from '@/utils/tools';
import commonApi from '@/api/common-api';

@Component({
    name: 'freight-info',
    components: {
        formlist: () => import('@/components/formlist/index.vue')
    }
})
export default class App extends mixins(vuexMixins) {
    @Prop({ required: true }) formData;
    @Prop({ required: true }) formList: FormListConfig[];

    @Watch('formData.nation', { immediate: true })
    onNationChange(val) {
        if (val) {
            this.formList.forEach((item) => {
                if (['province', 'city', 'county'].includes(item.value as string)) {
                    item.type = val === '中国' ? 'select' : 'input';
                }
            });
        }
    }
    mounted() {
        setTimeout(() => {
            this.$nextTick(() => {
                for (const k in this.v_selectData) {
                    Tools.setOptions(this.v_selectData[k], k, this.formList);
                }
            });
        }, 20);
        // this.getAreaListByParentId('', 'nation')
    }

    async getAreaListByParentId(parentName, areaType) {
        const res = await this._get({
            url: `${commonApi.getAreaListByParentId}`,
            params: {
                columnName: areaType,
                parentName
            }
        });
        if (res.code === 0) {
            this.formList.forEach((item) => {
                if (item.value === areaType) {
                    item.options = transformFields(res.data, {
                        label: 'name',
                        value: 'name',
                        realValue: 'id'
                    });
                }
            });
        }
    }
    nationChange(obj) {
        // console.log('nationChange obj', obj)
        this.getAreaListByParentId(obj.val, 'province');
        this.$set(this.formData, 'province', '');
        this.$set(this.formData, 'city', '');
        this.$set(this.formData, 'county', '');
    }
    provinceChange(obj) {
        // console.log('provinceChange obj', obj)
        this.getAreaListByParentId(obj.val, 'city');
        this.$set(this.formData, 'city', '');
        this.$set(this.formData, 'county', '');
    }
    cityChange(obj) {
        // console.log('cityChange obj', obj)
        this.getAreaListByParentId(obj.val, 'county');
        this.$set(this.formData, 'county', '');
    }
    countyChange() {}
    visibleNation(obj) {
        // console.log('visibleNation obj', obj)
        if (obj.val && (!obj.itemObj.options || obj.itemObj.options.length === 0)) {
            this.getAreaListByParentId('', 'nation');
        }
    }
    visibleProvince(obj) {
        // console.log('visibleNation obj', obj)
        if (obj.val && (!obj.itemObj.options || obj.itemObj.options.length === 0) && this.formData.nation) {
            this.getAreaListByParentId(this.formData.nation, 'province');
        }
    }
    visibleCity(obj) {
        console.log('visibleNation obj', obj);
        if (obj.val && (!obj.itemObj.options || obj.itemObj.options.length === 0) && this.formData.province) {
            this.getAreaListByParentId(this.formData.province, 'city');
        }
    }
    visibleCounty(obj) {
        console.log('visibleNation obj', obj);
        if (obj.val && (!obj.itemObj.options || obj.itemObj.options.length === 0) && this.formData.city) {
            this.getAreaListByParentId(this.formData.city, 'county');
        }
    }
}
</script>

<style scoped></style>
